<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--插值表达式，小胡子语法 mustache语法。下去了解模板引擎-->
    <h1>{{ title }}</h1>
    <!--插值表达式里面可以写什么？ 1. 字面量 2. 模型变量 3. 四则运算 4. 条件判断 5. 三目运算 6. ECMAScript 函数 7. 使用vuejs里面的方法，过滤器，计算属性-->

    <h2>字面量</h2>
    <p>{{ '字符串 ' + " 另外一个字符串" }}</p>
    <p>{{ 21 }}</p>
    <p>{{ 1 + 2 }}</p>
    <p>{{ number1 + 23 }}</p>
    <p>{{ 12 > 2 }}</p>
    <p>{{ 12 > 24 }}</p>
    <p>{{ age >=18 ? '已经成年了': '未成年！' }}</p>
    <p>{{ Math.random() }}</p>
    <p>{{ parseInt( 12.234) }}</p>
</div>
</body>
<script src="lib/vue.js"></script>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            title: 'hi vuejs!',
            number1: 23,
            age: 23,
        }
    })
</script>

</html>
